<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="table-container">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form-model layout="inline" @keyup.enter.native="searchQuery">
              <a-row>
                <a-col :span="5">
                  <a-form-model-item>
                    <a-input
                      v-model="queryParam.searchValue"
                      placeholder="请输入客户名称">
                      <a-icon slot="prefix" class="font-placeholder" type="search"/>
                    </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="6" :offset="1" class="table-page-search-submitButtons">
                  <a-button @click="searchQuery" type="primary">查询</a-button>
                  <a-button @click="searchReset" type="danger">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model>
          </div>

          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <a-button @click="handleAdd" type="primary" v-has="['insertSample']">新增采样记录</a-button>
            <a-button @click="exportExcel" :loading="exportLoading" v-has="['sampleExport']">导出采样记录</a-button>
          </div>

          <!-- 表格区域 -->
          <a-row>
            <a-col :span="24">
              <ry-table
                :columns="columns" :loading="loading" :data-source="dataSource"
                :rowKey="record=>record.id" :pagination="ipagination" bordered
                :scroll="{ x: 'max-content'}">

                <!-- 采样来源字典显示 -->
                <template slot="sampleSourceType" slot-scope="{ text }">
                  {{ $getDictName('record_source', text) || text }}
                </template>
                <template slot="age" slot-scope="{ record }">
                  {{ idCardChange(record.birth) }}
                </template>
                <!-- 实验室 -->
                <template slot="lab" slot-scope="{ record }">
                  {{record.projects.accountSource}}
                </template>
                <template slot="projectNumber" slot-scope="{ record }">
                  {{record.projects.projectNumber}}
                </template>
                <!-- 样品质量字典显示 -->
                <template slot="samplQuality" slot-scope="{ text }">
                  {{ $getDictName('sample_quality', String(text)) || text }}
                </template>
                <template slot="phone" slot-scope="{text}">
                  {{maskPhone(text)}}
                </template>

                <template slot="applyProject" slot-scope="{ text, record }">
                    <span v-if="text">
                        <a-tag v-for="item in text.split(',')" :key="item" color="blue">
                            {{ $getDictName('APPLY_PROJECT', item) }}
                        </a-tag>
                    </span>
                  <span v-else>--</span>
                </template>
                <template slot="action" slot-scope="{ record }">
                  <a-space size="middle">
                    <a-button type="primary" @click="handleView(record)" v-has="['sampleView']">详情</a-button>
                    <a-button type="primary" @click="handleEdit(record)" v-has="['sampleEdit']">编辑</a-button>
                  </a-space>
                </template>
              </ry-table>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <!-- 弹窗组件 -->
    <SampleRecordModal ref="modalForm" @ModalOk="modalFormOk" :url="url"/>
  </div>
</template>

<script>
import { RyListMixin } from '@/ryweb'
import SampleRecordModal from './modules/SampleRecordModal.vue'
import {exportExcel} from '@/utils/export.js'
export default {
  name: 'SampleRecord',
  mixins: [RyListMixin, exportExcel],
  components: {SampleRecordModal},
  data() {
    return {
      exportLoading: false,
      columns: [
        {title: '客户名称', align: 'center', dataIndex: 'nickname'},
        {title: '客户编号', align: 'center', dataIndex: 'serialNumber'},
        {title: '性别', align: 'center', dataIndex: 'sex'},
        {
          title: '年龄',
          align: 'center',
          dataIndex: 'age',
          scopedSlots: { customRender: 'age' } // 自定义渲染
        },
        {title: '项目名称', align: 'center', dataIndex: 'applyProject', key: 'applyProject', scopedSlots: {customRender: 'applyProject'}},
        {title: '项目数量', align: 'center', dataIndex: 'projectNumber', scopedSlots: {customRender: 'projectNumber'}},
        {
          title: '实验室',
          align: 'center',
          dataIndex: 'projects',   // 指向数组
          scopedSlots: { customRender: 'lab' } // 用 slot 渲染
        },
        {
          title: '采样来源类型',
          align: 'center',
          dataIndex: 'sampleSourceType',
          scopedSlots: { customRender: 'sampleSourceType' }
        },
        {title: '采样时间', align: 'center', dataIndex: 'samplTime'},
        {title: '采样地点', align: 'center', dataIndex: 'samplLocal'},
        {title: '采样医生', align: 'center', dataIndex: 'samplPerson'},
        {title: '样品质量', align: 'center', dataIndex: 'samplQuality', scopedSlots: {customRender: 'samplQuality'}},
        {title: '样本体积', align: 'center', dataIndex: 'sampleVolume'},
        {title: '备注', align: 'center', dataIndex: 'remark'},
        {title: '创建人', align: 'center', dataIndex: 'createBy'},
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          key: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: this.$api.permission.sampleRecord.list,
        add: this.$api.permission.sampleRecord.insert,
        edit: this.$api.permission.sampleRecord.update,
        exportFile: this.$api.permission.sampleRecord.exportFile,
      },
      queryParam: {
      },
      loading: false,
    }
  },

  methods: {
    maskPhone(phone) {
      if (!phone) return '';
      return phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
    },

    idCardChange(birth) {
      const birthDate = new Date(birth);
      const today = new Date();

      let age = today.getFullYear() - birthDate.getFullYear();
      const monthDiff = today.getMonth() - birthDate.getMonth();
      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
        age--;
      }
      return age;
    },
    /** 弹窗确认后刷新 */
    modalFormOk() {
      this.loadData(this.ipagination.current)
    },

    async exportExcel () {
      this.exportLoading = true
      await this.exportXlsNotDate(this.url.exportFile, this.queryParam, '采样记录导出文件', false)
      this.exportLoading = false
    },

  }
}
</script>

<style lang="less" scoped>
.table-page-search-wrapper {
  margin-left: 0;
}

.table-page-search-submitButtons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
}

.table-operator {
  margin-bottom: 16px;
}
</style>
